<!--
 * @Author: lmq
 * @Date: 2023-11-07 11:35:23
 * @LastEditTime: 2023-11-16 15:56:01
-->
<script setup>
    import { ref, reactive } from 'vue'
    import { Edit } from "@element-plus/icons-vue";
    import { ElMessage } from 'element-plus'
    import Qs from 'qs'
    import { getLeakList, addLeak, delLeak, getAllBasicEquipment } from "@/api/baseConfig.js"
    import tablePageSetting from "@/hooks/index.js"
    import formSetting from "@/views/baseConfig/form.js"
    const { headerStyle, tableData, page, query, total, date, loading, handleCurrentChange, getList, handelConfirmFun, handleSearch, handleReset } = tablePageSetting(getLeakList);
    const { type, editVisible, btnLoading, ruleFormRef, form, addItem, handleEdit, submitForm, resetForm } = formSetting(getList, addLeak);
    const size = ref("large");
    const facilityList = ref([])//设备集合

    const showPage = ref(false) //分页只有一页时是否显示
    const rules = reactive({
        operator: [
            { required: true, message: '请输入操作人', trigger: 'blur' },
        ],
        checkDate: [
            { required: true, message: '请选择检测日期', trigger: 'change' },
        ],
        checkResult: [
            { required: true, message: '请选择检测结果', trigger: 'change' },
        ],
        equipNo: [
            { required: true, message: '请选择设备', trigger: 'change' },
        ],
    })
    // 导出数据
    const handelExport = () => {
        let baseURL = import.meta.env.VITE_APP_WEWORK_LINK;
        let url = `${baseURL}/leak/export?${Qs.stringify(query.value)}`;
        window.location.href = url
    }
    // 删除数据
    const handelDelete = (e) => {
        let { row } = e;
        if (!row.id) return;
        btnLoading.value = true;
        delLeak({
            id: row.id
        })
            .then(res => {
                if (res.code == 0) {
                    ElMessage.success(`操作成功`);
                    if (page.page > 1 && tableData.value.length < 2) page.page = page.page - 1;
                    getList();
                } else {
                    ElMessage.error(res.message);
                }
            })
            .finally(() => {
                btnLoading.value = false;
            });
    }
    // 获取设备列表
    const getfFacilityList = () => {
        getAllBasicEquipment().then(res => {
            if (res.code == 0) {
                facilityList.value = res.data || []
            }
        })
    }
    // 表单中选择设备事件
    const handelSelectChange = (e) => {
        let obj = facilityList.value.find(item => item.equipNo == e);
        form.value.equipName = obj ? obj.equipName : ''
    }
    onMounted(() => {
        getList();
        getfFacilityList();
    })
    // 日期变动触发事件
    const handelChange = (e) => {
        query.value.minCheckDate = e && e.length > 0 ? e[0] : "";
        query.value.maxCheckDate = e && e.length > 1 ? e[1] : "";
        getList();
    }
</script>

<template>
    <div class="pad-25 bg-fff heiall">
        <div class="handle-box flex align-center ">
            <el-button type="primary" class="handle-del mar-r-10" size="large" @click="addItem" :size="size">新建
            </el-button>
            <el-input v-model.trim="query.keyword" placeholder="请输入操作人姓名" class="handle-input mar-r-10" :size="size"
                clearable>
            </el-input>
            <el-select v-model="query.equipName" placeholder="请选择设备名称" class="mar-r-10" :size="size" clearable>
                <el-option :label="item.equipName" :value="item.equipName" v-for="(item) in facilityList"
                    :key="item.id" />
            </el-select>
            <el-select v-model="query.checkResult" placeholder="请选择检测结果" class="mar-r-10" :size="size" clearable>
                <el-option label="正常" :value="1" />
                <el-option label="异常" :value="0" />
            </el-select>
            <el-date-picker v-model="date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"
                class="mar-r-10" style="flex: initial;" value-format="YYYY-MM-DD" @change="handelChange" />
            <el-button type="primary" @click="handleSearch" :size="size">筛选
            </el-button>
            <el-button type="primary" :size="size" plain @click="handleReset">重置</el-button>
            <el-button type="primary" :size="size" :icon="Edit" @click="handelExport">导出</el-button>
        </div>
        <div class="container">
            <el-table :data="tableData" style="width: 100%" header-cell-class-name="table-header" v-loading="loading"
                :header-cell-style="headerStyle" :size="size">
                <el-table-column prop="equipName" label="设备名称" />
                <el-table-column prop="checkDate" label="检测日期" />
                <el-table-column label="检测结果">
                    <template #default="scope">
                        <span v-if="scope.row.checkResult==0">异常</span>
                        <span v-else-if="scope.row.checkResult==1">正常</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column prop="operator" label="操作人" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-text @click="handelConfirmFun(scope.$index, scope.row,'确定删除测漏记录？',handelDelete)"
                            type="primary" class="pointer">删除
                        </el-text>
                    </template>
                </el-table-column>
            </el-table>
            <div class="mar-t-20">
                <el-pagination layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"
                    v-model:current-page="page.page" :hide-on-single-page="showPage" />
            </div>
        </div>
        <el-drawer v-model="editVisible" direction="rtl" :append-to-body="true" title="新增记录"
            @closed="resetForm(ruleFormRef)">

            <template #default>
                <el-form :model="form" label-width="100px" :rules="rules" ref="ruleFormRef" :size="size">
                    <el-form-item label="设备选择" prop="equipNo">
                        <el-select v-model="form.equipNo" placeholder="请选择" class="widall" :size="size"
                            @change="handelSelectChange">
                            <el-option v-for="item in facilityList" :key="item.id" :label="item.equipName"
                                :value="item.equipNo" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="检测日期" prop="checkDate">
                        <el-date-picker v-model="form.checkDate" type="date" placeholder="请选择检测日期" :size="size"
                            style="width:100%" />
                    </el-form-item>
                    <el-form-item label="操作人" prop="operator">
                        <el-input v-model.trim="form.operator" :size="size" show-word-limit maxlength="20"
                            placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="检测结果" prop="checkResult">
                        <el-select v-model="form.checkResult" placeholder="请选择" class="widall" :size="size">
                            <el-option label="正常" :value="1" />
                            <el-option label="异常" :value="0" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="editVisible=false" size="large">返回</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" size="large">完成</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<style lang="scss">
    @import "@/assets/mixin/css/tablePublic";
</style>